<template>
	<view class="contaniter">
		<view class="img1">
			<image class="" :src="src" mode="">
		</view>
		<view class="canvas">
			<view class="img">
				<view class="code">
					<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
					<text></text>
				</view>	
				</image>
			</view>
		</view>
		<!-- <input class="input" v-model="qrcodeText" placeholder="输入内容生成二维码" />
		<button class="button" type="primary" @tap="make()">生成二维码</button> -->
	</view>
</template> 

<script>
	import uQRCode from '@/common/QRcode/uqrcode.js'

	export default {
		data() {
			return {
				qrcodeText: '', 
				qrcodeSize: 129,
				qrcodeSrc: '',
				src:'../../static/logo.png'
			}
		},
		onLoad() {
			this.make()
		},
		mounted() {
			let params = {
				img: 1
			}
			this.$api.getImg(params).then((res) => {
				// 用 vuex 保存用户登录状态
				if(res.success) {
					console.log(res)
					this.src = res.rows[0].name
					console.log(this.src)
				}else {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 2000
					});
				}
			}).catch((err) => {
				console.log('request fail', err);
			})
		},
		methods: {
			make() {
				uni.showLoading({
					title: '海报生成中',
					mask: true
				})
				const USER = uni.getStorageSync('user');
				//获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp  
				let curWwwPath = window.document.location.href;  
				//获取主机地址之后的目录，如： uimcardprj/meun.jsp
				let pathName = window.document.location.pathname;  
				let pos = curWwwPath.indexOf(pathName);  
				
				//获取主机地址，如： http://localhost:8083  
				let localhostPaht = curWwwPath.substring(0,pos);
				let projectName = pathName.substring(0,pathName.substr(1).indexOf('/')+1);
				// this.qrcodeText = localhostPaht + projectName + '/pages/register/register?tjId=' + USER.id
				this.qrcodeText = 'http://jhyyyl.longshunha.com:61/html/#/pages/reg/reg?tjId=' + USER.id
				console.log(this.qrcodeText)
				
				uQRCode.make({
					canvasId: 'qrcode',
					text: this.qrcodeText,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
		}
	}
</script>

<style scoped>
	
	.text {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
		font-size: 36rpx;
		color: #666666;
	}

	.canvas {
		    margin-top: 27px;
		    text-align: center;
		    position: absolute;
		    bottom: 20%;
		    right: 17%;
	}

	.image {
		width: 258rpx;
		margin-top: 50rpx;
		text-align: center;
	}

	.image image {
		display: block;
		width: 258rpx;
		height: 258rpx;
	}

	.input {
		width: 600rpx;
		height: 40px;
		margin: 50rpx 0; 
		padding: 0 20rpx;
		border: 1px solid #b0b0b0;
		border-radius: 5px;
		background-color: #ffffff;
		box-sizing: border-box;
	}
	
	
	.contaniter{
		height: 100%;
		width: 100%;
		position: relative;
	}
	.img1{
		height: 100%;
		width: 100%;
		margin: 0 auto;
	}
	uni-page-body, uni-page-refresh {
		display: block;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
	}
	uni-image {
	    width: 80%;
	    height: 80%;
	    display: inline-block;
	    /* overflow: hidden; */
	    position: relative;
	    margin: 0 auto;
	    margin-left: 10%;
	    margin-top: 10%;
	}
</style>
